<template>
    <div>
        <div class="crumbs"> 
            <el-form ref="form" :model="form" label-width="130px">
            <div class="container">
                
                 <div class="lu hnk"></div><div class="hnk jgxx">机构信息</div>
                 <div class="jgcontainer">
                    <!-- <div class="hnk con"> -->
                    <el-form ref="form" :model="form" label-width="130px">
                        <el-row :gutter="20" style="margin-top:20px;">
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="机构简称">
                                <el-input class="handle-input" placeholder="不得超过6个字" v-model="zx.abbreviation"></el-input>
                                </el-form-item>
                                <el-form-item label="所在地区：" prop="area">
                                    <el-cascader size="large" :options="options" style="width:300px" v-model="form.area" ></el-cascader>
                                </el-form-item>
                                <el-form-item label="证件照片">
                                    <el-upload
                                        class="upload-poster"                               
										action="https://jsonplaceholder.typicode.com/posts/"
										:show-file-list="false"
										:on-change="imgPreview"
										:auto-upload="false">
										<img v-if="logoImg" :src="logoImg" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    jpg、png、gif格式，60x60像素，不超过2MB
                                </el-form-item>
                            
                            </el-col>
                        <el-col :span="12">
                        <el-form-item label="机构名称">
                            <el-input class="handle-input" placeholder="机构全称" v-model="zx.name"></el-input>
                        </el-form-item>
                        <el-form-item label="统一社会信用代码">
                            <el-input class="handle-input" placeholder="请输入统一社会信用代码" v-model="zx.societyCode"></el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input class="handle-input" placeholder="请填写详细地址" v-model="zx.region"></el-input>
                        </el-form-item>
                        <el-form-item label="证件期限">
                            <el-col :span="7" style="margin-left:-10px;">
                                <el-date-picker  type="date" placeholder="选择日期" :disabled="disabled" v-model="date1" style="width: 100%;"></el-date-picker>
                            </el-col>
                             <el-col class="line" style="margin-left:5px;" :span="2">至</el-col>
                             <el-col :span="7">
                                <el-date-picker type="date" placeholder="选择日期" :disabled="disabled" v-model="date2" style="width: 100%;"></el-date-picker>
                            </el-col>
                            <el-col :span="4">
                                <el-checkbox v-model="checked" @change="chedkeds">长期</el-checkbox>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input
                            style="width:300px;"
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="zx.remark">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    </el-row>
                     </el-form>

                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">联系人信息</div>
                    </div>
                    
                    
                        <el-row :gutter="20" style="margin-top:20px;">
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="联系人姓名">
                                    <el-input class="handle-input" placeholder="请输入姓名" v-model="zx.operateName"></el-input>
                                </el-form-item>
                                <el-form-item label="联系人职位">
                                    <el-input class="handle-input" placeholder="职位" v-model="zx.operatePosition"></el-input>
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="12">
                                <el-form-item label="联系人手机">
                                    <el-input class="handle-input" placeholder="请输入手机号码" v-model="zx.operatePhone"></el-input>
                                </el-form-item>
                                <el-form-item label="联系人电话">
                                    <el-input class="handle-input" placeholder="请输入联系号码" v-model="zx.landline"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">账号密码</div>
                    </div> 
                        <el-row :gutter="20" style="margin-top:20px;">
                            <el-col :span="10" style="margin-left:50px;">
                                <el-form-item label="手机号">
                                    <el-input class="handle-input" placeholder="请输入手机号" v-model="zx.user.username"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码">
                                    <el-input class="handle-input" placeholder="与密码保持一致" v-model="zx.user.password"></el-input>	
                                </el-form-item>
                            </el-col>
                            
                            <el-col :span="12">
                                <el-form-item label="密码">
                                    <el-input class="handle-input" placeholder="6-16位数字、字符、字母" v-model="form.name"></el-input>
                                </el-form-item>
                                
                            </el-col>
                        </el-row>
                    
                    <el-form-item class="footerFixed">
                        <el-button type="primary" @click="zfkh_save">提交</el-button>
                        <el-button @click="backPage">返回</el-button>
                    </el-form-item>
                    <!-- <el-button type="success" style="margin-top:50px;" align="center" @click="zfkh_save">保存</el-button> -->
                </div>

            </div>
       </el-form>
       
       </div>

    </div>
</template>

<script>
	import {regionData,CodeToText} from 'element-china-area-data'
   import {goverment_save,control_lists,customappversion} from "@/request/api"
    export default {
        data(){
            return{
                disabled:false,
                checked:false,
                zx:{ 
                    files:'',
                    abbreviation:'',//公司简称
                    name:'',//公司名称
                    societyCode:'',//社会信用代码
                    region:'',//详细地址
                    address:'',//地址
                    term:"",//经营期限
                    remark:'',//备注
                    licenseImg:'',//营业执照
                    operateName:'',//联系人姓名
                    operatePosition:'',//联系人职位
                    operatePhone:'',//联系人手机号码
                    landline:'',//联系人电话号码，
                    user:{
                        username:'',
                        password:''
                    },
					// versions:[{
					// 	appId:"2c915b6874bdf8ea0174ce70254b0001",
					// 	customAppVersionId:"2c915b6874bdf8ea0174ce7e1c330002"
					// },],
                    type:2,
                },
                logoImg:'',
                province:'',
                date1: '',
                date2: '',
                textarea2:'',
                imageUrl:'',
                 options: regionData,
                form: {
                name: '',
                region: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                
                }
            }
        },
        mounted(){
          this.get()
        },
        methods: {

			get(){
				// let data = {
				//     page:"1",
				// }
				// control_lists(data).then((res)=>{
				
				//     this.tableData = res.rows
				// })
				customappversion("2c915b6874bdf8ea0174ce70254b0001").then((res)=>{
				    // this.data = res.data
				})
			},
            chedkeds(){
                if(checked == true){
                    this.disabled = true
                    this.date1 = ""
                    this.date2 = ""
                }
            },
            imgPreview(file,fileList){
                console.log(this.logoImg)
                this.logoImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png|.jpeg)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.zx.files = file.raw
                    this.zx.licenseImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            },
            backPage(){
                this.$router.go(-1)
            },
            zfkh_save(){
                let data = this.zx
                var d= new Date(this.date1);
                var d1 = new Date(this.date2)
               
                var date = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()
                if(this.checked == true){
                    var date1 = "永久"
                    this.zx.term = date1
                }else{
                     if(this.date1 == "" || this.date2 == ""){

                    }else{
                        var date1 = d1.getFullYear() + '/' + (d1.getMonth() + 1) + '/' + d1.getDate()
                        this.zx.term = date + "至" + date1 
                    }
                }
                // console.log()
				this.zx.versionsString = JSON.stringify(this.zx.versions)
                this.zx.user = JSON.stringify(this.zx.user)
                let formdata = new FormData() 
                for(var a in data){
                    if(data[a] == null || data[a] == "null"){
                        data[a] = ""
                        formdata.append(a,'') 
                    }else{
                        formdata.append(a,data[a])
                    }
                }
                goverment_save(formdata).then((res)=>{
                    this.$message.success('保存成功');
                    this.$router.push({path:'/goverment'})
                })
            }
        }
    }
</script>

<style scoped>
    .crumbs{
        width:95%;
        margin:0 auto;
        margin-top: 30px;
        background: #ffffff;
    }
  
    .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
    .jgcontainer{
        font-weight: 400;
    }
    .con{
        width:40%;
        padding: 20px;
        font-size: 14px;
        margin-left: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
        /* margin-left: 30px; */
    }
  
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
</style>